<template>
  <view class="commont">
    <view class="commont_header">
      <text>评论区（{{ playlistReview.total }}）</text>
      <view class="commont_header_hot" @click="tabsHot">
        <text :class="hotactive === '推荐' ? 'active' : ''" data-active="推荐">推荐</text>
        <text :class="hotactive === '最热' ? 'active' : ''" data-active="最热">最热</text>
        <text :class="hotactive === '最新' ? 'active' : ''" data-active="最新">最新</text>
      </view>
    </view>
    <scroll-view class="commont_context" scroll-y="true" @scrolltolower="scrolltolowerCommont">
      <view v-for="item in (hotactive === '最新'? reviewCommonts:reviewHotCommonts)" :key="item.commentId">
        <view class="commont_user">
          <view class="commont_user_info">
            <image :src="item.user.avatarUrl" mode="heightFix"></image>
            <view class="commont_user_infoname">
              <text>{{ item.user.nickname }}</text>
              <text class="user_time">{{ item.timeStr }}</text>
            </view>
            <view class="like">
              <text>{{ item.likedCount }}</text>
              <text class="iconfont icon-icon"></text>
            </view>
          </view>
          <view class="user_context">
            {{ item.content }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { storeToRefs } from 'pinia'
  import { useCommontStore } from '@/store/modules/commontStore.js'
  const commontStore = useCommontStore()
  const { reviewCommonts,reviewHotCommonts,playlistReview } = storeToRefs(commontStore)
  console.log(reviewCommonts.value[0],reviewHotCommonts.value[0]);
  const hotactive = ref('推荐')
  const tabsHot = (e) => {
    if(e.target.dataset.active){
      hotactive.value = e.target.dataset.active
    }
  }
  const emit = defineEmits(['scrolltolower'])
  const scrolltolowerCommont = () => {
    emit('scrolltolower')
  }
</script>

<style lang="scss" scoped>
  .commont{
    height: 1000rpx;
    width: 100%;
    overflow: auto;
    .commont_header{
      position: fixed;
      z-index: 1;
      background-color: #fff;
      width: 100%;
      height: 100rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .commont_header_hot{
        text{
          margin: 0 10rpx;
          color: #aaaa7f;
        }
        .active{
          color: black;
        }
      }
    }
    .commont_context{
      height: 900rpx;
      margin-top: 100rpx;
      box-sizing: border-box;
      padding: 0 20rpx;
      .commont_user{
        .commont_user_info{
          display: flex;
          height: 100rpx;
          align-items: center;
          image{
            width: 60rpx;
            height: 60rpx;
            border-radius: 360px;
          }
          .commont_user_infoname{
            display: flex;
            flex-direction: column;
            margin-left: 20rpx;
            .user_time{
              font-size: 8rpx;
              color: #aaaa7f;
            }
          }
          .like{
            flex: 1;
            text-align: right;
            text{
              margin-left: 10rpx;
            }
          }
        }
        .user_context{
          margin-left: 80rpx;
          font-size: 30rpx;
          border-bottom: 2rpx solid #959897;
          padding: 20rpx 0 50rpx 0;
        }
      }
    }
  }
</style>